<template>
  <Panel>
    <template #title>
      <p>商品添加</p>
    </template>
    <template #content>
      <el-form ref="form" :model="addform" label-width="80px" size="mini">
        <el-form-item label="商品名称">
          <el-input v-model="addform.name" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品分类 ">
          <el-select v-model="addform.cate" placeholder="请选择分类">
            <el-option
              v-for="item in categories"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number
            v-model="addform.price"
            :min="1"
            :max="200"
            label="商品价格"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/goods/goods_img_upload"
            :show-file-list="false"
            :on-preview="handlePictureCardPreview"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="addform.imgUrl"
              :src="baseUrl + addform.imgUrl"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="addform.goodsDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加商品</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { getAllpro, addNewGoods } from '../../api/pro.js'
export default {
  data() {
    return {
      addform: {
        name: '',
        cate: '',
        price: '',
        imgUrl: '',
        goodsDesc: ''
      },
      imageUrl: '',
      categories: [],
      baseUrl: 'http://127.0.0.1:5000/upload/imgs/goods_img/'
    }
  },
  created() {
    this.getPro()
  },
  methods: {
    async getPro() {
      const data = await getAllpro()
      this.categories = data.categories
    },
    async onSubmit() {
      console.log(this.goodsForm)
      const data = await addNewGoods({
        name: this.addform.name,
        category: this.addform.cate,
        price: this.addform.price + '',
        imgUrl: this.addform.imgUrl,
        goodsDesc: this.addform.goodsDesc
      })
      if (data.code === 0) {
        this.$message({
          type: 'success',
          message: data.msg
        })
        this.$router.push('/pro/list')
      } else {
        this.$message({
          type: 'error',
          message: data.msg
        })
      }
    },
    handleAvatarSuccess(res, file) {
      this.addform.imgUrl = res.imgUrl
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
